<template>
  <view class="detail-container">
    <!-- 头部：标题 + 状态 -->
    <view class="detail-header">
      <view class="order-title">工单详情</view>
      <view class="order-status" :style="{ backgroundColor: statusColor, color: '#fff' }">
        {{ statusText }}
      </view>
    </view>

    <!-- 详情卡片：静态数据展示 -->
    <view class="detail-card">
      <view class="detail-item">
        <view class="label">工单编号</view>
        <view class="value">{{ order.id }}</view>
      </view>
      <view class="detail-item">
        <view class="label">工单标题</view>
        <view class="value">{{ order.title }}</view>
      </view>
      <view class="detail-item">
        <view class="label">工单描述</view>
        <view class="value">{{ order.des || '无描述' }}</view>
      </view>
      <view class="detail-item">
        <view class="label">联系人姓名</view>
        <view class="value">{{ order.name }}</view>
      </view>
      <view class="detail-item">
        <view class="label">联系人电话</view>
        <view class="value">{{ order.phone }}</view>
      </view>
      <view class="detail-item">
        <view class="label">服务地址</view>
        <view class="value">{{ order.address }}</view>
      </view>
      <view class="detail-item">
        <view class="label">支付状态</view>
        <view class="value">{{ payStatusText }}</view>
      </view>
      <view class="detail-item">
        <view class="label">工单状态</view>
        <view class="value">{{ statusText }}</view>
      </view>
      <view class="detail-item">
        <view class="label">工单类型</view>
        <view class="value">{{ getOrderTypeText(order.type) }}</view>
      </view>
      <view class="detail-item">
        <view class="label">工单更新时间 </view>
        <view class="value">:{{  order.updateTime }}</view>
      </view>
      <view class="detail-item">
        <view class="label">基础费用</view>
        <view class="value" style="color: #dd524d;">¥{{ order.price }}</view>
      </view>
      <view class="detail-item" v-if="order.status === 2">
        <view class="label">服务费</view>
        <view class="value" style="color: #dd524d;">¥{{ order.servicePay }}</view>
      </view>
      <view class="detail-item" v-if="order.status === 2">
        <view class="label">总价</view>
        <view class="value" style="color: #dd524d;">¥{{ totalPrice }}</view>
      </view>
      <view class="detail-item">
        <view class="label">分配师傅</view>
        <view class="value">{{ order.masterName || '暂无' }}</view>
      </view>
      <view class="detail-item">
        <view class="label">工单创建时间</view>
        <view class="value">:{{order.createTime }}</view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="action-btns">
      <button 
        class="pay-btn" 
        @click="goToPay"
        v-if="order.status === 2 && order.payStatus === 0"
      >
        去支付
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { getWorkOrderDetailAPI } from '@/api/order.js'
import { onLoad } from '@dcloudio/uni-app'

// 工单数据
const order = ref({
  id: '',
  title: '',
  des: '',
  name: '',
  phone: '',
  address: '',
  payStatus: 0,
  status: 0,
  type: 0,
  updateTime: '',
  price: 0,
  servicePay: 0,
  masterName: '',
  createTime: ''
});

// 计算总价
const totalPrice = computed(() => {
  const p = parseFloat(order.value.price) || 0;
  const s = parseFloat(order.value.servicePay) || 0;
  return (p + s).toFixed(2);
});

// 状态文本和颜色
const statusText = ref('');
const statusColor = ref('');
const payStatusText = ref('');

// 页面加载时获取工单详情
onLoad(async (options) => {
  if (options && options.id) {
    await fetchOrderDetail(options.id);
  }
});

// 获取工单详情
const fetchOrderDetail = async (orderId) => {
  try {
    uni.showLoading({ title: '加载中...' });
    
    const res = await getWorkOrderDetailAPI(orderId);
    console.log('获取工单详情API返回结果:', res);
    if (res && res.code === 0 && res.data) {
      order.value = {
        ...res.data,
        // 确保数值字段正确，映射数据库字段
        price: res.data.pay !== undefined ? res.data.pay : (res.data.price || 0),
        servicePay: res.data.service_pay !== undefined ? res.data.service_pay : (res.data.servicePay || 0)
      };
      updateStatusInfo();
      updatePayStatusInfo();
    } else {
      console.error('获取工单详情失败，错误码:', res?.code, '错误信息:', res?.msg, '完整响应:', res)
      uni.showToast({
        title: res?.msg || '获取工单详情失败',
        icon: 'none'
      });
    }
  } catch (error) {
    console.error('获取工单详情失败:', error);
    uni.showToast({
      title: '获取工单详情失败',
      icon: 'none'
    });
  } finally {
    uni.hideLoading();
  }
};

// 获取工单类型文本
const getOrderTypeText = (type) => {
  const map = {
    0: '普通',
    1: '紧急'
  };
  return map[type] || '未知类型';
};

// 更新状态文本和颜色
const updateStatusInfo = () => {
  switch (order.value.status) {
    case 0:
      statusText.value = '待分配';
      statusColor.value = '#f0ad4e'; // 黄色
      break;
    case 1:
      statusText.value = '处理中';
      statusColor.value = '#f0ad4e'; // 黄色
      break;
    case 2:
      statusText.value = '已完成';
      statusColor.value = '#4cd964'; // 绿色
      break;
    case 3:
      statusText.value = '已取消';
      statusColor.value = '#999'; // 灰色
      break;
    default:
      statusText.value = '未知状态';
      statusColor.value = '#666';
  }
};

// 更新支付状态文本
const updatePayStatusInfo = () => {
  switch (order.value.payStatus) {
    case 0:
      payStatusText.value = '未支付';
      break;
    case 1:
      payStatusText.value = '已支付';
      break;
    default:
      payStatusText.value = '未知';
  }
};

// 去支付
const goToPay = () => {
  try {
    uni.navigateTo({
      url: `/pages/order-payment/payment?id=${order.value.id}`,
      fail: () => {
        uni.showToast({ title: '无法打开支付页', icon: 'none' });
      }
    });
  } catch (e) {
    console.error('路由跳转失败:', e);
    uni.showToast({ title: '无法打开支付页', icon: 'none' });
  }
};
</script>

<style scoped>
/* 页面容器：全屏背景 + 内边距 */
.detail-container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
  box-sizing: border-box;
}

/* 头部：标题 + 状态 */
.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}
.order-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}
.order-status {
  padding: 8rpx 18rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
}

/* 详情卡片：白色背景 + 阴影 + 内边距 */
.detail-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 32rpx;
}
/* 详情项：标签 + 内容 横向布局 */
.detail-item {
  display: flex;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
  align-items: flex-start; /* 适应长文本换行 */
}
/* 最后一项移除下边框 */
.detail-item:last-child {
  border-bottom: none;
}
.label {
  width: 160rpx;
  font-size: 26rpx;
  color: #666;
  padding-top: 2rpx; /* 对齐文本基线 */
}
.value {
  flex: 1;
  font-size: 26rpx;
  color: #333;
  word-break: break-all; /* 长地址/需求自动换行 */
  line-height: 40rpx; /* 行高优化，提升可读性 */
}

/* 操作按钮 */
.action-btns {
  padding: 0 20rpx 20rpx; /* 底部内边距，避免按钮贴底 */
  box-sizing: border-box;
}
.pay-btn {
  width: 100%;
  height: 88rpx;
  background-color: #007aff;
  color: #fff;
  border-radius: 44rpx;
  font-size: 28rpx;
}
</style>